<template>
  <div>
    <van-nav-bar title="收藏列表" left-text="返回" left-arrow @click-left="$router.back()" class="top-bar" />
    <div class="favorite-list" v-for="(item, i) in renderData" :key="i">
      <van-card
        :price="`${item.price}元/月`"
        :desc="item.desc"
        :title="item.title"
        :thumb="`http://liufusong.top:8080${item.houseImg}`"
      >
        <template #tags>
          <van-tag color="#fff" plain type="danger">标签</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { favorites } from '@/api/user'
export default {
  components: {},
  props: {},
  data() {
    return {
      renderData: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await favorites()
    const data = res.body

    this.renderData = [...this.renderData, ...data]
    console.log(this.renderData)
  },
  methods: {}
}
</script>

<style scoped>
.top-bar {
  background-color: #087 !important;
  font-size: 20px;
}
.favorite-list {
  display: flex;
}
.van-card__thumb img {
  width: 106px;
  height: 80px;
}
.van-card {
  height: 120px;
  width: 100%;
  border-bottom: 1px solid #e5e5e5 !important;
}
.van-multi-ellipsis--l2 {
  font-weight: 700 !important;
  font-size: 15px;
}
.van-ellipsis {
  font-size: 12px;
  color: #afb2b3;
}
.van-tag--danger {
  color: #39becd !important;
  background: #e1f5f8 !important;
}
.van-card__price {
  font-size: 12px;
  color: #fa5741;
}
.van-tag--danger.van-tag--plain {
  padding: 4px 5px;
  font-size: 12px;
}
</style>
